﻿@model PProdAPI.Models.item

@section Scripts {
  @Scripts.Render("~/bundles/jqueryval")
  <script type="text/javascript" src="@Url.Content("~/Scripts/knockout-2.1.0.js")"></script> 
  <script type="text/javascript">
        function ItemsViewModel() {
            var self = this;
            self.items = ko.observableArray();

            var baseUri = '@ViewBag.ApiUrl';

            self.create = function (formElement) {
                // If the form data is valid, post the serialized form data to the web API.
                $(formElement).validate();
                if ($(formElement).valid()) {
                    $.post(baseUri, $(formElement).serialize(), null, "json")
                .done(function (o) {
                    // Add the new product to the view-model.
                    self.items.push(o);
                });
                }
            }

            self.update = function (item) {
                $.ajax({ type: "PUT", url: baseUri + '/' + item.Id, data: item });
            }

            self.remove = function (item) {
                // First remove from the server, then from the view-model.
                $.ajax({ type: "DELETE", url: baseUri + '/' + item.Id })
            .done(function () { self.items.remove(item); });
            }

            $.getJSON(baseUri, self.items);
        }

        $(document).ready(function () {
            ko.applyBindings(new ItemsViewModel());
        })
        
  </script>
}

@{
    ViewBag.Title = "itemAdmin";
}

<h2>Admin</h2>

<div class="content">
    <div class="float-left">
        <ul id="update-products" data-bind="foreach: items">
            <li>
                <div><div class="item">ID</div><span data-bind="text: $data.Id"></span></div>
                <div><div class="item">Item ID</div> <input type="text" data-bind="value: $data.ItemID"/></div> 
                <div><div class="item">Description</div> <input type="text" data-bind="value: $data.Description"/></div>
                <div><div class="item">Minimum</div> <input type="text" data-bind="value: $data.MinimumStock"/></div>
                <div><div class="item">Maximum</div> <input type="text" data-bind="value: $data.MaximumStock"/></div>
                <div><div class="item">Maximum</div> <input type="text" data-bind="value: $data.PalletWeight"/></div>
                <div>
                    <input type="button" value="Update" />
                    <input type="button" value="Delete Item" />
                </div>
         </li>
        </ul>
    </div>

    <div class="float-right">
    <h2>Add New Item</h2>
    <form id="addItem" data-bind="submit: create">
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Contact</legend>
            @Html.EditorForModel()
            <p>
                <input type="submit" value="Save" />
            </p>
        </fieldset>
    </form>
    </div>
</div>